import FormInput from "@/components/public/FormInput";
import { View, Image, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import { AtImagePicker } from "taro-ui";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import "./index.scss";
import { uploadFilesList } from "@/helper/utils";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";
import ChooseStore from "@/components/view/ChooseStore";

const AddAd = (props) => {
  const { addTypeText = "", onDelete, onChange, disabled, initValue } = props;
  const [isShow, setIsShow] = useState(false);
  const [form, setForm] = useState({
    orderBy: "0",
    banner: [],
    storeId: "",
    name: "",
  });

  useEffect(() => {
    if (initValue) {
      console.log("initValue", initValue);
      setForm(initValue);
    }
  }, [initValue]);

  const handleChange = (key, value, name?) => {
    if (disabled) {
      return;
    }
    const temp = { ...form };
    if (key === "storeId") {
      temp.name = name;
    }
    temp[key] = value;
    setForm(temp);
    onChange?.(temp);
  };

  const chooseImage = (value: any) => {
    if (disabled) {
      return;
    }
    // uploadFileApi(value?.[0]?.file?.path).then((res: any) => {
    //   handleChange("banner", [res.data]);
    // });
    console.log("value", value);
    uploadFilesList(value).then((res) => {
      handleChange(
        "banner",
        res.map((item) => item.data)
      );
    });
  };

  console.log("render ", form);
  return (
    <View className="child flex-column mt-16 pd-16 pt-32 border-bpx bg-ffffff">
      <View className="dis-flex align-center justify-between">
        <View className="fs-30 lh-42 cl-black">{`${addTypeText}广告封面`}</View>
        {!disabled && (
          <View
            className="dis-flex align-center"
            onClick={() => {
              onDelete();
            }}
          >
            <Image src={ico_del_two} className="img-36" />
            <Text className="ml-8 fs-28 lh-38 cl-E14848">删除</Text>
          </View>
        )}
      </View>
      <FormInput
        value={form.orderBy}
        disabled={disabled}
        type="number"
        label="广告排序"
        placeholder="请输入广告排序"
        onChange={(value) => {
          handleChange("orderBy", value);
        }}
      />
      <View className="flex-column bg-FAFAFA pd-lr-18 pd-tb-28 br-16 mt-32">
        <AtImagePicker
          className="picker"
          files={form.banner?.map((item) => {
            return {
              url: item,
            };
          })}
          count={1}
          multiple={false}
          onChange={(value) => {
            chooseImage(value);
          }}
        ></AtImagePicker>
        <Text className="mt-40 fs-28 lh-38 cl-black">广告链接商家：</Text>
        {/* <Input
          disabled={disabled}
          value={form.storeId}
          placeholder="请输入广告链接商家"
          className="link mt-32 br-8 pl-24 pd-tb-8"
          onInput={(e) => {
            handleChange("storeId", e.detail.value);
          }}
        /> */}

        <View className="dis-flex pd-lr-26 border-box bg-ffffff mt-16">
          <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
            商家链接：
          </View>
          <View
            className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between"
            onClick={() => {
              setIsShow(true);
            }}
          >
            <Text className="fs-24 lh-32 cl-C2C2C2">
              {form.name ? form.name : "请选择商家"}
            </Text>
            <Image src={ico_jiantou_one} className="img-32" />
          </View>
        </View>
        {isShow && (
          <ChooseStore
            isShow={isShow}
            setIsShow={setIsShow}
            onChange={(shop) => {
              handleChange("storeId", shop.value, shop.label);
            }}
          ></ChooseStore>
        )}
      </View>
    </View>
  );
};
export default AddAd;
